<template>
	<view class="main-add-item">
		<view class="item-list" v-for="(item,index) in itemList" :key="index">
			<image class="delete-img" :src="deleteImg" v-if="index!=0" @click.stop="deleteItem(index)"></image>
			<view class="select-list" v-if="chooseType != 1">
				<picker class="select-info" :range="rangeList" @change="chooseRange($event,index)">
					<view class="select-mess">
						<view class="select-name">{{item.type || '请选择类型'}}</view>
						<image class="select-img" :src="selectImg"></image>
					</view>
				</picker>
				<input :class="{'input-select':true,'disable-class':disabled}" v-model.trim="item.content" :type="type"
					:placeholder="placeholder" placeholder-class="placeholder-info" :maxlength="maxlength"
					:disabled="disabled" />
			</view>
			<input v-else :class="{'input-item':true,'disable-class':disabled}" v-model.trim="item.content" :type="type"
				:placeholder="placeholder" placeholder-class="placeholder-info" :maxlength="maxlength"
				:disabled="disabled" />
		</view>
		<view class="add-btn" @click="addBtn" v-if="!disabled">
			<image class="add-img" :src="addImg"></image>
			<view class="add-name">添加</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			//数据源
			list: {
				type: Array,
				default: () => {
					return []
				}
			},
			//输入框类型(1:普通输入框 2:类型输入框)
			chooseType: {
				type: String,
				default: '1'
			},
			//类型输入框选项(输入框类型为2时生效)
			rangeList: {
				type: Array,
				default: () => {
					return []
				}
			},
			//输入框为空时占位符
			placeholder: {
				type: String,
				default: '请输入'
			},
			//输入框input的类型
			type: {
				type: String,
				default: 'text'
			},
			//输入框最大输入长度
			maxlength: {
				type: String,
				default: '100'
			},
			//输入框是否禁用
			disabled: {
				type: Boolean,
				default: false
			}
		},
		watch: {
			list: {
				deep: true,
				immediate: true,
				handler(parentArry) {
					this.itemList = parentArry
				},
			},
			itemList(newArry) {
				this.$emit('update:list', newArry)
			}
		},
		data() {
			return {
				deleteImg: require('../../static/delete.png'),
				selectImg: require('../../static/xiala.png'),
				addImg: require('../../static/add.png'),
				itemList: []
			};
		},
		methods: {
			chooseRange(e, index) {
				this.itemList[index].type = this.rangeList[e.detail.value]
				this.itemList = JSON.parse(JSON.stringify(this.itemList))
			},
			deleteItem(index) {
				this.itemList.splice(index, 1)
			},
			addBtn() {
				let obj = {
					content: ''
				}
				this.itemList.push(obj)
			}
		}
	};
</script>

<style scoped>
	.main-add-item {
		width: 100%;
	}

	.item-list {
		width: 100%;
		position: relative;
		margin-bottom: 30rpx;
	}

	.delete-img {
		width: 42rpx;
		height: 42rpx;
		position: absolute;
		right: -21rpx;
		top: -21rpx;
	}

	.select-list {
		width: calc(100% - 4rpx);
		display: flex;
		align-items: center;
		justify-content: space-between;
		border: 2rpx solid #DDDDDD;
		background: #FFFFFF;
		border-radius: 8rpx;
		height: 72rpx;
	}

	.select-info {
		width: 220rpx;
	}

	.select-mess {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.select-name {
		font-size: 28rpx;
		color: #2E6ADA;
	}

	.select-img {
		margin-left: 4rpx;
		width: 26rpx;
		height: 26rpx;
	}

	.input-select {
		padding: 0 28rpx;
		width: calc(100% - 220rpx);
		height: 72rpx;
		font-size: 30rpx;
		color: #333333;
	}

	.disable-class {
		background-color: #f0f0f0 !important;
	}

	.input-item {
		padding: 0 28rpx;
		/* width: calc(100% - 60rpx); */
		height: 72rpx;
		background: #FFFFFF;
		border-radius: 8rpx;
		border: 2rpx solid #DDDDDD;
		font-size: 30rpx;
		color: #333333;
	}

	.placeholder-info {
		color: #B1B1B1;
	}

	.add-btn {
		width: calc(100% - 2rpx);
		height: 66rpx;
		background-color: #D8E5FF;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 6rpx;
		border: dashed #2E6ADA 1rpx;
	}

	.add-img {
		width: 30rpx;
		height: 30rpx;
		margin-right: 8rpx;
	}

	.add-name {
		font-size: 30rpx;
		color: #2E6ADA;
	}
</style>